<template>
  <div class="home">
  <div class="box">
    <div class="left">
      <el-menu
      default-active="num"
      class="el-menu-vertical-demo"
      background-color="#ccc"
      text-color="#fff"
      active-text-color="blue">
      <div v-for="item in list" :key="item.id">


      <el-menu-item :index="item.id" v-if="!item.children">
        <i :class="item.icon"></i>
        <router-link :to="item.path" tag="span">
          {{ item.name }}
        </router-link>>
      </el-menu-item>


      <el-submenu :index="item.id" v-else-if="item.children">
        <template slot="title">
          <i :class="item.icon"></i>
          <span>{{item.name}}</span>
        </template>
          <el-menu-item v-for="r in item.children" :key="r.id" :index="r.id">
            <i :class="r.icon"></i>
            <router-link :to="r.path">{{ r.name }}</router-link>
          </el-menu-item>
      </el-submenu>
    </div>
    </el-menu>
    </div>
    <div class="right">
      <div class="top">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item v-for="item in nav" :key="item">{{ item }}</el-breadcrumb-item>
          </el-breadcrumb>

          <!-- 下拉 -->
          <el-dropdown>
            <span class="el-dropdown-link">
              张争严
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>首页</el-dropdown-item>
              <el-dropdown-item>修改密码</el-dropdown-item>
              <el-dropdown-item>切换账号</el-dropdown-item>
              <el-dropdown-item disabled>退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
      </div>
      <div class="bottom">
        <div v-if="flag">首页</div>
        <router-view v-else></router-view>
      </div>
    </div>
  </div>
  </div>
</template>

<script>
export default {
  data(){
    return{   
      flag:true,    
       num:"4",
       bav:[],
      list: [
        {
          id: "186",
          name: "首页",
          path: "/home",
          icon: "el-icon-s-home"
        },
        {
          id: "33",
          name: "管理员/权限",
          icon: "el-icon-lollipop",
          children: [
            {
              id: "4",
              name: "角色管理",
              path: "/Role",
              icon: "el-icon-coffee-cup"
            },
            {
              id: "5",
              name: "管理员列表",
              path: "/GuanLie",
              icon: "el-icon-s-custom"
            },
          ],
        },
        {
          id: "14",
          name: "Banner管理",
          path: "/Banner",
          icon: "el-icon-picture-outline",

        },
        {
          id: "34",
          name: "CMS模块",
          icon: "el-icon-circle-plus-outline",
          children: [
            {
              id: "20",
              name: "单页管理",
              path: "/DanYe",
              icon: "el-icon-edit"
            },
            {
              id: "21",
              name: "公告管理",
              path: "/GongGao",
              icon: "el-icon-service"
            },
          ]
        },
        {
          id: "121",
          name: "商城管理",
          icon: "el-icon-shopping-cart-full",
          children: [
            {
              id: "1122",
              name: "商品分类",
              path: "/ShangFeng",
              icon: "el-icon-menu"
            },
            {
              id: "78",
              name: "规格尺寸",
              path: "/GuiGe",
              icon: "el-icon-document-delete"
            },
            {
              id: "43",
              name: "商品管理",
              path: "/ShangGui",
              icon: "el-icon-edit"
            }
          ]
        },
      ]
    }
  },
    methods: {
    getNum(arr){
      arr.forEach(r=>{
        if(r.path==this.$route.path) this.num=r.id
        else if(r.children){
          this.getNum(r.children)
        }
      }
      )
    }
    },
    mounted() {
      this.getNum(this.list)
    },
    watch:{
      "$route":{
        handler(n){
          this.nav=n.meta.nav;
          this.flag=n.path=="/home"?true:false
        },
        immediate:true,
        deep:true,

      }
    }
  }

</script>
<style lang="scss" scoped>
.home{
  .box{
display: flex;
a{
  text-decoration: none;
  color: #fff;
}
.left{
  width: 200px;
  height: 100vh;
  background-color: #ccc;
}
::v-deep .right{
  flex: 1;
  .top{
    height: 50px;
    background: #ddd;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0px 20px;
  }
  .bottom{
    height: calc(100vh - 50px);
    
  }
}
  }
}
</style>
